<template>
  <el-dialog title="班级变更" :visible.sync="dialogVisible" :close-on-click-modal="false"
             :close-on-press-escape="false" :before-close="handleClose" @close="$emit('update:visible',false)"
             top="100px">
    <el-form :model="editForm" label-width="100px" ref="editForm">
      <el-form-item label="" prop="section_id">
        <p class="title">确认为<span class="tearchname">{{tearchOption.realname}}</span>进行班级变更，请选择需要变更的班级</p>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否绑定班级" prop="section_id">
            <el-radio-group v-model="usertype" @change="radiochange">
              <el-radio :label="0">否</el-radio>
              <el-radio :label="1">是</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
        </el-col>
      </el-row>
      <el-row v-if="usertype==1">
        <el-col :span="12">
          <el-form-item label="年段" prop="section_id">
            <el-select v-model="editForm.section_id" placeholder="请选择年段" @change="sectionChange">
              <el-option :label="item.section_name" :value="item.id" v-for="(item, index) in sectionList"
                         :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="班级" prop="class_id">
            <el-select v-model="editForm.class_id" placeholder="请先选择年段" v-if="classesList">
              <el-option :label="item.class_name" :value="item.id" v-for="(item, index) in classesList"
                         :key="item.id"></el-option>
            </el-select>
            <p v-else>无对应班级</p>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click.native="resetForm" size="small">取消</el-button>
      <el-button type="primary" @click.native="editSubmit" size="small">提交</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import api from '@/utils/api.js'

  export default {
    name: 'Dialog',
    props: ['visible', 'tearchOption'],
    watch: {
      visible () {
        this.dialogVisible = this.visible
      }
    },

    data () {
      return {
        dialogVisible: false,
        classesListNew: [],
        sectionList: [],
        classesList: [],
        editForm: {
          section_id: '',
          class_id: 0
        },
        usertype: 0
      }
    },

    created () {
      this.classList()
    },
    methods: {
      handleClose () {
        this.dialogVisible = false
      },
      resetForm () {
        this.dialogVisible = false
      },
      editSubmit () {
        this.$confirm('确认提交更换' + this.tearchOption.realname + '老师的班级?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.editSubmitFn()
        }).catch(() => {
        })
      },
      editSubmitFn () {
        if (!this.editForm.class_id && this.usertype === 1) {
          this.$message.error('请选择需要变更的班级')
          return
        }
        this.$post(api.classes_log_add, {class_id: this.editForm.class_id, user_id: this.tearchOption.id}).then((response) => {
          if (response.code === 0) {
            this.$message({
              message: '设置成功',
              type: 'success'
            })
            this.$emit('InitFn')
            this.dialogVisible = false
          } else {
            this.$message.error(response.msg)
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      radiochange () {
        if (this.usertype === 0) {
          this.editForm.section_id = ''
          this.editForm.class_id = 0
        } else {
          this.editForm.section_id = ''
          this.editForm.class_id = ''
        }
      },
      classList () {
        // 年段
        this.$fetch(api.user_sectionindex, {p: 1}).then((response) => {
          if (response.code === 0) {
            this.sectionList = response.list.data
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
        // 班级
        this.$fetch(api.user_classesindex, {p: 1}).then((response) => {
          if (response.code === 0) {
            let array_ = {}
            for (let i in response.list.data) {
              let new_array = array_[response.list.data[i].section_id] || []
              new_array.push(response.list.data[i])
              array_[response.list.data[i].section_id] = new_array
            }
            this.classesListNew = array_
            console.log('班级信息:', array_)
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      sectionChange (val, option) {
        console.log('获取相应的', val, this.sectionList, this.classesListNew)
        if (option !== 'init') {
          this.editForm.class_id = ''
        }
        for (let i in this.sectionList) {
          if (this.sectionList[i].id === val) {
            this.classesList = this.classesListNew[this.sectionList[i].section_name]
            return
          }
        }
      }
    }
  }
</script>、
<style>
  .tearchname {
    color: #409EFF;
    margin: 0 5px;
  }
</style>
